<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:wicket="http://wicket.apache.org/">
<wicket:panel>
  <div wicket:id="examples" class="section">
  	<h2>Tabbed panel example</h2>
	<p>
		This example show how to build a tabbed panel with <strong>WiQuery</strong>.
	</p>
	<div class="section">
		<p>
			Tabs are built in an unobtrusive fashion, that's why a simple
			HTML list of links will be used to build these tabs.
		</p>		
		<div class="runit">
			<div wicket:id="tabs">
				<ul>
					<li><a href="#tab1">Tab 1</a></li>
					<li><a href="#tab2">Tab 2</a></li>
					<li><a href="#tab3">Tab 3</a></li>
				</ul>
				<div id="tab1">
						<h4>Tab 1</h4>
						<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Morbi facilisis porta nisi. In faucibus. Sed a erat a enim
						hendrerit commodo. Etiam lobortis libero in eros. Donec enim 
						diam, molestie a, faucibus sed, convallis iaculis, odio. 
						Duis mauris quam, eleifend eget, viverra placerat, eleifend 
						vitae, lorem. Sed tempus, magna vel tempor pulvinar, justo 
						ipsum dignissim nibh, id tincidunt magna urna sed odio. 
						Proin vulputate tempus felis. Cras non elit.
						</p>
				</div>
				<div id="tab2">
						<h4>Tab 2</h4>
						<p>
						This is content of the tab 2 :)
						</p>
				</div>
				<div id="tab3">
						<h4>Tab 3</h4>
						<p>
							This is content of the tab 3 :)
						</p>
				</div>
			</div>	
		</div>
		
		<div class="source">
			<p class="htmlCode">
<code class="html">
&lt;div wicket:id="tabs"&gt;
	&lt;ul&gt;
		&lt;li&gt;&lt;a href="#tab1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#tab2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#tab3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	&lt;div id="tab1"&gt;
			&lt;h4&gt;Tab 1&lt;/h4&gt;
			&lt;p&gt;
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			Morbi facilisis porta nisi. In faucibus. Sed a erat a enim
			hendrerit commodo. Etiam lobortis libero in eros. Donec enim 
			diam, molestie a, faucibus sed, convallis iaculis, odio. 
			Duis mauris quam, eleifend eget, viverra placerat, eleifend 
			vitae, lorem. Sed tempus, magna vel tempor pulvinar, justo 
			ipsum dignissim nibh, id tincidunt magna urna sed odio. 
			Proin vulputate tempus felis. Cras non elit.
			&lt;/p&gt;
	&lt;/div&gt;
	&lt;div id="tab2"&gt;
			&lt;h4&gt;Tab 2&lt;/h4&gt;
			&lt;p&gt;
			This is content of the tab 2 :)
			&lt;/p&gt;
	&lt;/div&gt;
	&lt;div id="tab3"&gt;
			&lt;h4&gt;Tab 3&lt;/h4&gt;
			&lt;p&gt;
				This is content of the tab 3 :)
			&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;	
</code>
			</p>
			<p class="javaCode">
<code class="java">
// consider being in a WebPage constructor
public MyWebPage(String id) {
	super(id);
	
	this.add(new Tabs("tabs"));
}
</code>
			</p>

		</div>
	</div>
  </div>
</wicket:panel>
</html>
